<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>用户登陆</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="Keywords" content="sofangche" />
    <!-- 引入Bootstrap框架 -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/pcsofangche/common/bootstrap/css/bootstrap.min.css" />
    <script src="${pageContext.request.contextPath}/static/pcsofangche/common/bootstrap/jquery/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/static/pcsofangche/common/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

    <!-- 引入全局css -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/pcsofangche/common/allcss/stander.css" />
    <!-- 引入全局js -->
    <script src="${pageContext.request.contextPath}/static/pcsofangche/common/alljs/stander.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入页面css -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/pcsofangche/user/login/login.css" />
    <!-- 引入页面js -->
    <script src="${pageContext.request.contextPath}/static/pcsofangche/user/login/login.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
<jsp:include page="../../common/allhead/allhead.jsp" flush="true"/>
<div class="container">
    <div class="row back">
        <div class="col-lg-12 col-md-12">
            <div>
                <div class="container">
                    <div class="row back">
                        <div class="col-lg-12 col-md-12">
                            <div class="userpsw">
                                <div class="login">用户登陆</div>
                                <div class="row tab">
                                    <div class="col-lg-6 col-lg-6 phonelogin" onclick="changeplogin()">手机快捷登录</div>
                                    <div class="col-lg-6 col-lg-6 pswdlogin" onclick="changeuplogin()">账号密码登陆</div>
                                </div>
                                <div class="hengxian"></div>
                                <!--手机快捷登陆-->
                                <div class="plogin" id="plogin">
                                    <div class="phone">
                                        <input type="text" placeholder="请输入中国大陆手机号" style="color:grey;width: 330px;height: 40px;" id="phone" />
                                    </div>

                                    <div class="vcode">
                                        <input type="text" placeholder="请输入右边图片验证码" style="color:grey;width: 220px;height: 40px;" id="vcode"/>
                                        <div class="vcodeimg">
                                            <img src="/meb/codeimg" id="vcodeimg" style="height: 40px;width:110px" onclick="changevcode()">
                                        </div>
                                    </div>
                                    <div class="waring" id="vcodewaring">验证码错误，请重新输入</div>
                                    <div class="pcode">
                                        <input type="text" placeholder="手机验证码" id="pcode" style="color:grey;width: 220px;height: 40px;"/>
                                        <div class="sendpcode" onclick="sendcode()"><span>发送验证码</span></div>
                                    </div>
                                </div>
                                <!--账号密码登陆-->
                                <div class="uplogin" id="uplogin">
                                    <div class="phone">
                                        <input type="text" placeholder="请输入中国大陆手机号" style="color:grey;width: 330px;height: 40px;" id="upphone" />
                                    </div>
                                    <div class="psd" id="password">
                                        <input type="password"  style="color:grey;width: 330px;height: 40px;" placeholder="请输入密码" id="pswd">
                                    </div>
                                    <div class="vcode">
                                        <input type="text" placeholder="请输入右边图片验证码" style="color:grey;width: 220px;height: 40px;" id="upvcode"/>
                                        <div class="vcodeimg">
                                            <img src="/meb/codeimg" id="upvcodeimg" style="height: 40px;width:110px" onclick="changeupvcode()">
                                        </div>
                                    </div>
                                    <div class="waring" id="upvcodewaring">验证码错误，请重新输入</div>
                                </div>

                                <div class="password">
                                    <input type="checkbox" id="psdflag" onclick="checkboxOnclick(this)">自动登录
                                </div>
                                <div class="submit" onclick="login()">
                                    登&nbsp;&nbsp;&nbsp;&nbsp;录
                                </div>
                                <div class="toother">
                                    <div class="torgst">
                                        <a onclick="torgst()">注册</a>
                                    </div>
                                    <div class="toforget">
                                        <a onclick="toforget()">忘记密码</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="../../common/allfoot/allfoot.jsp" flush="true"/>

</body>
<script>

$(document).ready(function(){
});

    var logintype='plogin'
    //下面横线要加样式
    function changeplogin() {
        logintype='plogin'
        $("#plogin").css("display","block")
        $("#uplogin").css("display","none")
    }
    function changeuplogin() {
        logintype='uplogin'
            $("#plogin").css("display","none")
            $("#uplogin").css("display","block")
    }

//验证码失焦检测是否正确
$("#vcode").blur(function(){

    let vcode=$("#vcode").val();
    console.log(vcode)
    $.ajax({
        url:'http:/meb/checkcode',
        data:{
            code:vcode
        },
        type:'post',
        dataType:'json',
        success:function(data){
            vcheck=data.code;
            if(data.code=="2"){
                console.log("xxxx")
                $("#vcodewaring").css('display','block');
                changevcode();
            }
            if(data.code=="1"){
                $("#vcodewaring").css('display','none');
            }
        },
        error:function(data){

        },
        complete:function (data) {

        }
    })

});

$("#upvcode").blur(function(){
    console.log("123")
    let upvcode=$("#upvcode").val();
    $.ajax({
        url:'http:/meb/checkcode',
        data:{
            code:upvcode
        },
        type:'post',
        dataType:'json',
        success:function(data){
            vcheck=data.code;
            if(data.code=="2"){
                console.log("xxxx")
                $("#upvcodewaring").css('display','block');
                changeupvcode();
            }
            if(data.code=="1"){
                $("#upvcodewaring").css('display','none');
            }
        },
        error:function(data){

        },
        complete:function (data) {

        }
    })

});
        //点击切换验证码
        function changevcode(){
            console.log("123")
            let random=Math.random()
            console.log(random);
            $("#vcodeimg").attr('src','/meb/codeimg?'+random);

    }

function changeupvcode(){

    let random=Math.random()
    console.log(random);
    $("#upvcodeimg").attr('src','/meb/codeimg?'+random);

}
//点击发送手机验证码
function sendcode() {
    console.log("执行sendcode")
    let phone=$("#phone").val();
    console.log(phone)
    $.ajax({
        url:'http:/meb/phonecode',
        data:{
            phone:phone
        },
        type:'post',
        dataType:'json',
        success:function(data){
            console.log(data)
        },
        error:function(data){

        },
        complete:function (data) {

        }
    })
}
//点击登录
function login(){
            if(logintype=='plogin'){
                let phone=$('#phone').val();
                let code=$('#pcode').val();
                $.ajax({
                    url:'http:/meb/login',
                    data:{
                        phone:phone,
                        code:code
                    },
                    type:'post',
                    dataType:'json',
                    success:function(data){
                        console.log(data)
                    },
                    error:function(data){

                    },
                    complete:function (data) {

                    }
                })
            }
            if(logintype=='uplogin'){
                let upphone=$('#upphone').val();
                let pswd=$('#pswd').val();
                $.ajax({
                    url:'http:/meb/login',
                    data:{
                        phone:upphone,
                        password:pswd
                    },
                    type:'post',
                    dataType:'json',
                    success:function(data){
                        console.log(data)
                    },
                    error:function(data){

                    },
                    complete:function (data) {

                    }
                })
            }
            //登录成功之后如有跳转，比如登录成功就跳转首页，在后台接口完成此逻辑
}
//跳转注册
function torgst(){
    window.location.href="http:/meb/userregister";
}

//跳转忘记密码
function toforget(){
    console.log("123123")
    window.location.href="http:/meb/forgetpsd";
}
</script>
</html>
